<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LuckDog编码工具演示</title>
    <style>
        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            max-width: 1000px;
            margin: 0 auto;
            padding: 20px;
            line-height: 1.6;
            color: #333;
        }
        h1 {
            color: #2c3e50;
            border-bottom: 2px solid #eee;
            padding-bottom: 10px;
            margin-bottom: 30px;
        }
        h2 {
            color: #3498db;
            margin-top: 0;
            margin-bottom: 15px;
        }
        .container {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            justify-content: space-between;
        }
        .demo-section {
            margin-bottom: 30px;
            padding: 20px;
            border: 1px solid #ddd;
            border-radius: 8px;
            background-color: #f9f9f9;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            flex: 1 1 45%;
            min-width: 300px;
        }
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        input, textarea {
            width: 100%;
            padding: 10px;
            margin-bottom: 15px;
            border: 1px solid #ccc;
            border-radius: 4px;
            font-size: 14px;
        }
        .button-group {
            display: flex;
            gap: 10px;
            margin-bottom: 15px;
        }
        button {
            background-color: #3498db;
            color: white;
            padding: 10px 15px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.3s;
            flex: 1;
        }
        button:hover {
            background-color: #2980b9;
        }
        button.secondary {
            background-color: #95a5a6;
        }
        button.secondary:hover {
            background-color: #7f8c8d;
        }
        .result-container {
            margin-top: 15px;
        }
        .result {
            background-color: #fff;
            border: 1px solid #ddd;
            padding: 15px;
            border-radius: 4px;
            word-break: break-all;
            min-height: 20px;
        }
        .note {
            font-size: 0.9em;
            color: #666;
            margin-top: 20px;
            padding: 15px;
            background-color: #f0f0f0;
            border-radius: 4px;
        }
        .tabs {
            display: flex;
            margin-bottom: 15px;
        }
        .tab {
            padding: 10px 20px;
            cursor: pointer;
            background-color: #f0f0f0;
            border: 1px solid #ddd;
            border-bottom: none;
            border-radius: 4px 4px 0 0;
        }
        .tab.active {
            background-color: #fff;
            border-bottom: 1px solid #fff;
            margin-bottom: -1px;
        }
        footer {
            margin-top: 40px;
            text-align: center;
            color: #7f8c8d;
            font-size: 0.9em;
        }
    </style>
</head>
<body>
    <h1>LuckDog编码工具演示</h1>
    <p>此页面演示了LuckDog编码工具在浏览器环境中的使用方式和效果。选择下方的编码类型，输入文本，然后点击相应的编码或解码按钮。</p>
    
    <div class="container">
        <!-- Hex编码部分 -->
        <div class="demo-section">
            <h2>Hex / Base16 编码</h2>
            <label for="hex-input">输入文本:</label>
            <textarea id="hex-input" rows="3" placeholder="输入要编码或解码的文本">hello world</textarea>
            <div class="button-group">
                <button onclick="encodeHex()">编码</button>
                <button onclick="decodeHex()">解码</button>
                <button class="secondary" onclick="copyHexResult()">复制结果</button>
            </div>
            <div class="result-container">
                <label for="hex-result">结果:</label>
                <div class="result" id="hex-result"></div>
            </div>
        </div>
        
        <!-- Base16编码部分 -->
        <div class="demo-section">
            <h2>Base16 编码</h2>
            <label for="base16-input">输入文本:</label>
            <textarea id="base16-input" rows="3" placeholder="输入要编码或解码的文本">hello world</textarea>
            <div class="button-group">
                <button onclick="encodeBase16()">编码</button>
                <button onclick="decodeBase16()">解码</button>
                <button class="secondary" onclick="copyBase16Result()">复制结果</button>
            </div>
            <div class="result-container">
                <label for="base16-result">结果:</label>
                <div class="result" id="base16-result"></div>
            </div>
        </div>
        
        <!-- Base64编码部分 -->
        <div class="demo-section">
            <h2>Base64 编码</h2>
            <label for="base64-input">输入文本:</label>
            <textarea id="base64-input" rows="3" placeholder="输入要编码或解码的文本">hello world</textarea>
            <div class="button-group">
                <button onclick="encodeBase64()">编码</button>
                <button onclick="decodeBase64()">解码</button>
                <button class="secondary" onclick="copyBase64Result()">复制结果</button>
            </div>
            <div class="result-container">
                <label for="base64-result">结果:</label>
                <div class="result" id="base64-result"></div>
            </div>
        </div>
        
        <!-- Base64URL编码部分 -->
        <div class="demo-section">
            <h2>Base64URL 编码</h2>
            <label for="base64url-input">输入文本:</label>
            <textarea id="base64url-input" rows="3" placeholder="输入要编码或解码的文本">https://example.com/?data=test+/</textarea>
            <div class="button-group">
                <button onclick="encodeBase64URL()">编码</button>
                <button onclick="decodeBase64URL()">解码</button>
                <button class="secondary" onclick="copyBase64URLResult()">复制结果</button>
            </div>
            <div class="result-container">
                <label for="base64url-result">结果:</label>
                <div class="result" id="base64url-result"></div>
            </div>
        </div>
        
        <!-- URL安全编码部分 -->
        <div class="demo-section">
            <h2>URL 安全编码</h2>
            <label for="url-input">输入文本:</label>
            <textarea id="url-input" rows="3" placeholder="输入要编码或解码的文本">https://example.com/?name=张三&age=25</textarea>
            <div class="button-group">
                <button onclick="encodeURL()">编码</button>
                <button onclick="decodeURL()">解码</button>
                <button class="secondary" onclick="copyURLResult()">复制结果</button>
            </div>
            <div class="result-container">
                <label for="url-result">结果:</label>
                <div class="result" id="url-result"></div>
            </div>
        </div>
        
        <!-- Base32编码部分 -->
        <div class="demo-section">
            <h2>Base32 编码</h2>
            <label for="base32-input">输入文本:</label>
            <textarea id="base32-input" rows="3" placeholder="输入要编码或解码的文本">hello world</textarea>
            <div class="button-group">
                <button onclick="encodeBase32()">编码</button>
                <button onclick="decodeBase32()">解码</button>
                <button class="secondary" onclick="copyBase32Result()">复制结果</button>
            </div>
            <div class="result-container">
                <label for="base32-result">结果:</label>
                <div class="result" id="base32-result"></div>
            </div>
        </div>
        
        <!-- Base45编码部分 -->
        <div class="demo-section">
            <h2>Base45 编码</h2>
            <label for="base45-input">输入文本:</label>
            <textarea id="base45-input" rows="3" placeholder="输入要编码或解码的文本">hello world</textarea>
            <div class="button-group">
                <button onclick="encodeBase45()">编码</button>
                <button onclick="decodeBase45()">解码</button>
                <button class="secondary" onclick="copyBase45Result()">复制结果</button>
            </div>
            <div class="result-container">
                <label for="base45-result">结果:</label>
                <div class="result" id="base45-result"></div>
            </div>
        </div>
        
        <!-- Base58编码部分 -->
        <div class="demo-section">
            <h2>Base58 编码</h2>
            <label for="base58-input">输入文本:</label>
            <textarea id="base58-input" rows="3" placeholder="输入要编码或解码的文本">hello world</textarea>
            <div class="button-group">
                <button onclick="encodeBase58()">编码</button>
                <button onclick="decodeBase58()">解码</button>
                <button class="secondary" onclick="copyBase58Result()">复制结果</button>
            </div>
            <div class="result-container">
                <label for="base58-result">结果:</label>
                <div class="result" id="base58-result"></div>
            </div>
        </div>
        
        <!-- Base62编码部分 -->
        <div class="demo-section">
            <h2>Base62 编码</h2>
            <label for="base62-input">输入文本:</label>
            <textarea id="base62-input" rows="3" placeholder="输入要编码或解码的文本">hello world</textarea>
            <div class="button-group">
                <button onclick="encodeBase62()">编码</button>
                <button onclick="decodeBase62()">解码</button>
                <button class="secondary" onclick="copyBase62Result()">复制结果</button>
            </div>
            <div class="result-container">
                <label for="base62-result">结果:</label>
                <div class="result" id="base62-result"></div>
            </div>
        </div>
        
        <!-- Morse编码部分 -->
        <div class="demo-section">
            <h2>Morse 编码</h2>
            <label for="morse-input">输入文本:</label>
            <textarea id="morse-input" rows="3" placeholder="输入要编码或解码的文本">hello world</textarea>
            <div class="button-group">
                <button onclick="encodeMorse()">编码</button>
                <button onclick="decodeMorse()">解码</button>
                <button class="secondary" onclick="copyMorseResult()">复制结果</button>
            </div>
            <div class="result-container">
                <label for="morse-result">结果:</label>
                <div class="result" id="morse-result"></div>
            </div>
        </div>
        
        <!-- Base85编码部分 -->
        <div class="demo-section">
            <h2>Base85 编码</h2>
            <label for="base85-input">输入文本:</label>
            <textarea id="base85-input" rows="3" placeholder="输入要编码或解码的文本">hello world</textarea>
            <div class="button-group">
                <button onclick="encodeBase85()">编码</button>
                <button onclick="decodeBase85()">解码</button>
                <button class="secondary" onclick="copyBase85Result()">复制结果</button>
            </div>
            <div class="result-container">
                <label for="base85-result">结果:</label>
                <div class="result" id="base85-result"></div>
            </div>
        </div>
        
        <!-- Base91编码部分 -->
        <div class="demo-section">
            <h2>Base91 编码</h2>
            <label for="base91-input">输入文本:</label>
            <textarea id="base91-input" rows="3" placeholder="输入要编码或解码的文本">hello world</textarea>
            <div class="button-group">
                <button onclick="encodeBase91()">编码</button>
                <button onclick="decodeBase91()">解码</button>
                <button class="secondary" onclick="copyBase91Result()">复制结果</button>
            </div>
            <div class="result-container">
                <label for="base91-result">结果:</label>
                <div class="result" id="base91-result"></div>
            </div>
        </div>
        
        <!-- Base100编码部分 -->
        <div class="demo-section">
            <h2>Base100 (Emoji) 编码</h2>
            <label for="base100-input">输入文本:</label>
            <textarea id="base100-input" rows="3" placeholder="输入要编码或解码的文本">hello world</textarea>
            <div class="button-group">
                <button onclick="encodeBase100()">编码</button>
                <button onclick="decodeBase100()">解码</button>
                <button class="secondary" onclick="copyBase100Result()">复制结果</button>
            </div>
            <div class="result-container">
                <label for="base100-result">结果:</label>
                <div class="result" id="base100-result"></div>
            </div>
        </div>
    </div>
    
    <div class="note">
        <p><strong>注意：</strong> 本演示使用了LuckDog编码工具库中的encodeUtil工具。在实际项目中，您可以通过以下方式引入:</p>
        <pre>const { encodeUtil } = require('luckdog');</pre>
        <p>或者在ES模块中:</p>
        <pre>import { encodeUtil } from 'luckdog';</pre>
        <p><strong>重要：</strong> 本演示页面需要先执行打包命令，确保 dist 目录中存在打包好的文件：</p>
        <pre>npm run build</pre>
        <p>或者</p>
        <pre>yarn build</pre>
    </div>
    
    <footer>
        <p>LuckDog - 实用工具库 | <a href="https://gitee.com/liushuku/luckdog" target="_blank">Gitee</a></p>
    </footer>
    
    <!-- 引用打包后的文件 -->
    <script src="../../dist/luckdog.umd.js"></script>
    <script>
        // 检查是否加载了luckdog库
        if (typeof luckdog === 'undefined' || !luckdog.encodeUtil) {
            console.error("警告：未能加载luckdog库，请确保先运行 npm run build 或 yarn build 命令！");
            alert("未能加载luckdog库，请确保先运行构建命令: npm run build 或 yarn build");
        }
        
        // 使用luckdog.encodeUtil
        const encodeUtil = luckdog.encodeUtil;
        
        console.log("编码工具已加载", "使用luckdog库");
        
        // Hex编码/解码
        function encodeHex() {
            const input = document.getElementById('hex-input').value;
            const result = encodeUtil.toHex(input);
            document.getElementById('hex-result').textContent = result;
        }
        
        function decodeHex() {
            const input = document.getElementById('hex-result').textContent;
            const result = encodeUtil.fromHex(input);
            document.getElementById('hex-result').textContent = result;
        }
        
        function copyHexResult() {
            copyToClipboard('hex-result');
        }
        
        // Base16编码/解码
        function encodeBase16() {
            const input = document.getElementById('base16-input').value;
            const result = encodeUtil.toBase16(input);
            document.getElementById('base16-result').textContent = result;
        }
        
        function decodeBase16() {
            const input = document.getElementById('base16-result').textContent;
            const result = encodeUtil.fromBase16(input);
            document.getElementById('base16-result').textContent = result;
        }
        
        function copyBase16Result() {
            copyToClipboard('base16-result');
        }
        
        // Base64编码/解码
        function encodeBase64() {
            const input = document.getElementById('base64-input').value;
            const result = encodeUtil.toBase64(input);
            document.getElementById('base64-result').textContent = result;
        }
        
        function decodeBase64() {
            const input = document.getElementById('base64-result').textContent;
            const result = encodeUtil.fromBase64(input);
            document.getElementById('base64-result').textContent = result;
        }
        
        function copyBase64Result() {
            copyToClipboard('base64-result');
        }
        
        // Base64URL编码/解码
        function encodeBase64URL() {
            const input = document.getElementById('base64url-input').value;
            const result = encodeUtil.toBase64URL(input);
            document.getElementById('base64url-result').textContent = result;
        }
        
        function decodeBase64URL() {
            const input = document.getElementById('base64url-result').textContent;
            const result = encodeUtil.fromBase64URL(input);
            document.getElementById('base64url-result').textContent = result;
        }
        
        function copyBase64URLResult() {
            copyToClipboard('base64url-result');
        }
        
        // URL安全编码/解码
        function encodeURL() {
            const input = document.getElementById('url-input').value;
            const result = encodeUtil.encodeURL(input);
            document.getElementById('url-result').textContent = result;
        }
        
        function decodeURL() {
            const input = document.getElementById('url-result').textContent;
            const result = encodeUtil.decodeURL(input);
            document.getElementById('url-result').textContent = result;
        }
        
        function copyURLResult() {
            copyToClipboard('url-result');
        }
        
        // Base32编码/解码
        function encodeBase32() {
            const input = document.getElementById('base32-input').value;
            const result = encodeUtil.toBase32(input);
            document.getElementById('base32-result').textContent = result;
        }
        
        function decodeBase32() {
            const input = document.getElementById('base32-result').textContent;
            const result = encodeUtil.fromBase32(input);
            document.getElementById('base32-result').textContent = result;
        }
        
        function copyBase32Result() {
            copyToClipboard('base32-result');
        }
        
        // Base45编码/解码
        function encodeBase45() {
            const input = document.getElementById('base45-input').value;
            const result = encodeUtil.toBase45(input);
            document.getElementById('base45-result').textContent = result;
        }
        
        function decodeBase45() {
            const input = document.getElementById('base45-result').textContent;
            const result = encodeUtil.fromBase45(input);
            document.getElementById('base45-result').textContent = result;
        }
        
        function copyBase45Result() {
            copyToClipboard('base45-result');
        }
        
        // Base58编码/解码
        function encodeBase58() {
            const input = document.getElementById('base58-input').value;
            const result = encodeUtil.toBase58(input);
            document.getElementById('base58-result').textContent = result;
        }
        
        function decodeBase58() {
            const input = document.getElementById('base58-result').textContent;
            const result = encodeUtil.fromBase58(input);
            document.getElementById('base58-result').textContent = result;
        }
        
        function copyBase58Result() {
            copyToClipboard('base58-result');
        }
        
        // Base62编码/解码
        function encodeBase62() {
            const input = document.getElementById('base62-input').value;
            const result = encodeUtil.toBase62(input);
            document.getElementById('base62-result').textContent = result;
        }
        
        function decodeBase62() {
            const input = document.getElementById('base62-result').textContent;
            const result = encodeUtil.fromBase62(input);
            document.getElementById('base62-result').textContent = result;
        }
        
        function copyBase62Result() {
            copyToClipboard('base62-result');
        }
        
        // Morse编码/解码
        function encodeMorse() {
            const input = document.getElementById('morse-input').value;
            const result = encodeUtil.toMorse(input);
            document.getElementById('morse-result').textContent = result;
        }
        
        function decodeMorse() {
            const input = document.getElementById('morse-result').textContent;
            const result = encodeUtil.fromMorse(input);
            document.getElementById('morse-result').textContent = result;
        }
        
        function copyMorseResult() {
            copyToClipboard('morse-result');
        }
        
        // Base85编码/解码
        function encodeBase85() {
            const input = document.getElementById('base85-input').value;
            const result = encodeUtil.toBase85(input);
            document.getElementById('base85-result').textContent = result;
        }
        
        function decodeBase85() {
            const input = document.getElementById('base85-result').textContent;
            const result = encodeUtil.fromBase85(input);
            document.getElementById('base85-result').textContent = result;
        }
        
        function copyBase85Result() {
            copyToClipboard('base85-result');
        }
        
        // Base91编码/解码
        function encodeBase91() {
            const input = document.getElementById('base91-input').value;
            const result = encodeUtil.toBase91(input);
            document.getElementById('base91-result').textContent = result;
        }
        
        function decodeBase91() {
            const input = document.getElementById('base91-result').textContent;
            const result = encodeUtil.fromBase91(input);
            document.getElementById('base91-result').textContent = result;
        }
        
        function copyBase91Result() {
            copyToClipboard('base91-result');
        }
        
        // Base100编码/解码
        function encodeBase100() {
            const input = document.getElementById('base100-input').value;
            const result = encodeUtil.toBase100(input);
            document.getElementById('base100-result').textContent = result;
        }
        
        function decodeBase100() {
            const input = document.getElementById('base100-result').textContent;
            const result = encodeUtil.fromBase100(input);
            document.getElementById('base100-result').textContent = result;
        }
        
        function copyBase100Result() {
            copyToClipboard('base100-result');
        }
        
        // 复制到剪贴板通用函数
        function copyToClipboard(elementId) {
            const resultElement = document.getElementById(elementId);
            const text = resultElement.textContent;
            
            if (!text) return;
            
            navigator.clipboard.writeText(text).then(() => {
                const originalBgColor = resultElement.style.backgroundColor;
                resultElement.style.backgroundColor = '#e6ffe6';
                setTimeout(() => {
                    resultElement.style.backgroundColor = originalBgColor;
                }, 500);
            }).catch(err => {
                console.error('复制失败: ', err);
            });
        }
    </script>
</body>
</html> 